<!-- 创建时间: 2019年10月26日 星期六 20:51 -->
<template>
    <div class="booking_container">
        <div class="row text-center">
            <div class="col-sm-3 col-xs-6">
                <mt-button type="primary" plain @click="showFlag(0)">
                    <i class="fa fa-circle" v-show="flag == '0'"></i> 已预约
                </mt-button>
            </div>
            <div class="col-sm-3 col-xs-6">
                <mt-button type="primary" plain @click="showFlag(1)">
                    <i class="fa fa-circle" v-show="flag == '1'"></i> 已入库
                </mt-button>
            </div>
            <div class="col-sm-3 col-xs-6">
                <mt-button type="primary" plain @click="showFlag(2)">
                    <i class="fa fa-circle" v-show="flag == '2'"></i> 历史记录
                </mt-button>
            </div>
            <div class="col-sm-3 col-xs-6">
                <mt-button type="primary" plain @click="showFlag(3)">
                    <i class="fa fa-circle" v-show="flag == '3'"></i> 预约超时
                </mt-button>
            </div>
        </div>
        <hr />
        <div class="page-tab-container">
            <mt-tab-container v-model="flag" swipeable class="page-tabbar-tab-container">
                <mt-tab-container-item id="0">
                    <Respay :parentValue="tradeNo_0" :optionsText="optionsText" @refresh="Refresh"></Respay>
                </mt-tab-container-item>
                <mt-tab-container-item id="1">
                    <Respay :parentValue="tradeNo_1" :optionsText="optionsText" @refresh="Refresh"></Respay>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                    <Respay :parentValue="tradeNo_2" :optionsText="optionsText" @refresh="Refresh"></Respay>
                </mt-tab-container-item>
                <mt-tab-container-item id="3">
                    <Respay :parentValue="tradeNo_3" :optionsText="optionsText" @refresh="Refresh"></Respay>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Respay from "../subComponents/Respay.vue";
import error from "../../js/error";
import {
    Indicator,
    Toast,
    MessageBox,
    TabContainer,
    TabContainerItem
} from "mint-ui";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: { Respay },
    beforeRouteEnter(to, from, next) {
        if (sessionStorage.getItem("cubelibrarytoken") == null) {
            next({
                path: "/LoginPage",
                query: { redirect: this.$route.path }
            });
        } else {
            next();
        }
    },
    data() {
        //这里存放数据
        return {
            // 向子组件传递久订单信息
            tradeNo_0: [], // 已预约
            tradeNo_1: [], // 已入库
            tradeNo_2: [], // 历史记录
            tradeNo_3: [], // 预约超时
            // 标记选择 未入库/已入库/历史记录
            flag: "0",
            // 若没有相关的数据，则展示没有什么数据
            optionsText: "已预约"
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        getUserBookingInfo(status) {
            this.$http.post("getUserBookingInfo", { status: status }).then(
                response => {
                    switch (status) {
                        case 0:
                            this.tradeNo_0 = response.body;
                            break;
                        case 1:
                            this.tradeNo_1 = response.body;
                            break;
                        case 2:
                            this.tradeNo_2 = response.body;
                            break;
                        case 3:
                            this.tradeNo_3 = response.body;
                            break;
                        default:
                            break;
                    }
                    Indicator.close();
                },
                response => {
                    error(response.status, this);
                    Indicator.close();
                }
            );
        },
        showFlag(number) {
            switch (number) {
                case 0:
                    this.flag = "0";
                    this.getUserBookingInfo(0);
                    this.optionsText = "已预约";
                    break;
                case 1:
                    this.flag = "1";
                    this.getUserBookingInfo(1);
                    this.optionsText = "已入库";
                    break;
                case 2:
                    this.flag = "2";
                    this.getUserBookingInfo(2);
                    this.optionsText = "历史记录";
                    break;
                case 3:
                    this.flag = "3";
                    this.getUserBookingInfo(3);
                    this.optionsText = "预约超时";
                    break;
                default:
                    break;
            }
        },
        Refresh(isRefresh){
            if(isRefresh){
                this.getUserBookingInfo(0);
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        Indicator.open({
            text: "加载中...",
            spinnerType: "fading-circle"
        });
        this.getUserBookingInfo(0);
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.booking_container {
    margin-top: 50px;
    .row {
        margin: 10px 0px;
        .col-sm-3.col-xs-6 {
            padding-bottom: 15px;
        }
    }
    hr{
        margin-top: 0px;
    }
}
.mint-button:after {
    background-color: #26a2ff;
}
</style>